<template>
  <!-- v-model:是实现变量和表单标签value属性,双向绑定的指令 -->
  <!-- 遇到复选框,v-model的变量值   非数组-关联的是复选框的checked属性   数组-关联的是复选框的value属性 -->
  <div>
    <div>用户名: <input type="text" v-model="username" /></div>

    <div>
      密码:
      <input type="password" v-model="password" />
    </div>

    <div>
      来自于:
      <!-- 下拉菜单要绑定在select上 -->
      <select name="" id="" v-model="from">
        <option value="北京市">北京</option>
        <option value="武汉市">武汉</option>
        <option value="上海市">上海</option>
        <option value="杭州市">杭州</option>
        <option value="深圳市">深圳</option>
      </select>
    </div>

    <div>
      爱好:
      <!-- <input type="checkbox" v-model="hobby" value="抽烟" />抽烟
      <input type="checkbox" v-model="hobby" value="喝酒" />喝酒
      <input type="checkbox" v-model="hobby" value="烫头" />烫头 -->

      <input type="checkbox" v-model="hobby1" value="抽烟" />抽烟
      <input type="checkbox" v-model="hobby2" value="喝酒" />喝酒
      <input type="checkbox" v-model="hobby3" value="烫头" />烫头
    </div>

    <div>
      性别:
      <input type="radio" value="man" name="sex" v-model="gender" />男
      <input type="radio" value="wman" name="sex" v-model="gender" />女
    </div>

    <div>
      自我介绍:
      <textarea name="" id="" cols="30" rows="10" v-model="intro"> </textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: "VuecliDemoApp",

  data() {
    return {
      username: "",
      password: "",
      from: "",
      hobby: [],
      gender: "",
      intro: "",
      hobby1:'',
      hobby2:'',
      hobby3:''
    };
  },
  // 总结:
  // 特别注意: v-model, 在input[checkbox]的多选框状态
  // 变量为非数组, 则绑定的是checked的属性(true/false) - 常用于: 单个绑定使用
  // 变量为数组, 则绑定的是他们的value属性里的值 - 常用于: 收集勾选了哪些值
  mounted() {},

  methods: {},
};
</script>

<style lang="scss" scoped>
</style>